<template>
       <div class="content">
            <div class="list-left" v-if="types == 'sele' || types == 'inp'">
                {{title}}:
            </div>
            <div class="list-right" v-if="types == 'sele'">
                <select v-model="seleData" class="list-select" @change="Callback">
                    <option :value="item.name" v-for="(item,index) in optionList" :key="index">{{item.name}}</option>
                </select>
            </div>
            <div class="list-right" v-if="types == 'inp'">
                <input type="text" class="list-inp">
            </div>
        </div>
</template>

<script>
import { defineComponent} from "vue";
export default defineComponent({
data() {
    return {
        seleData:'',
}
},
props:{
    title:String,
    optionList:Array,
    types:String,
},
methods:{
    Callback(){
        this.$emit('val',this.seleData)
    }
}
});
</script>

<style lang="less" scoped>
.content{
    padding-left: 20px;
    margin-top: 20px;
 }
 .list-left{
    font-size: 18px;
    font-weight: 400;
    line-height: 40px;
    color: #81859C;
    padding-right: 10px;
 }
 .list-select{
    width: 210px;
    height: 40px;
    user-select:none;
    border: 1px solid #C0C2CD;
    outline: none;
    padding-left: 6px;
}
.list-inp{
    width: 198px;
    height: 38px;
    border: 1px solid #C0C2CD;
    outline: none;
    padding-left: 10px;
  
}
</style>